<template>
	<view class="container">
		<fu-navbar :title="title" bgColor="#0f68f0" color="#fff"></fu-navbar>
		<!-- <view class="tab-wrap">
			<view class="tab" :class="{'tab-active': current == 2}" @click="tabChange('PAGE_INS_PENDING_ANNOUNCE', 2)" v-if="state == 3 || state == 6">巡检单</view>
			<view class="tab" :class="{'tab-active': current == 0}" @click="tabChange('PAGE_REP_PENDING_ANNOUNCE', 0)">维修单</view>
			<view class="tab" :class="{'tab-active': current == 1}" @click="tabChange('PAGE_UPHOLD_PENDING_ANNOUNCE', 1)">维保单</view>
		</view> -->
		<view class="fixTop"> 
			<view class="tab-wrap">
				<view class="tab" v-for="item in tabDynamics" :key="item.index"
					:class="{ 'tab-active': current === item.index }" @click="tabChange(item.name, item.index)">
					{{item.title}}
				</view>
			</view>
			
			<view class="shaixuan">
				<image src="../../../static/images/icon17.png" mode="aspectFill" @click="isShow = !isShow"></image>
			</view>
		</view>
		
		<view style="margin-top: 210rpx;"></view>
		
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
				<view class="urgent" v-if="tabType.startsWith('PAGE_REP')">
					<image src="../../../static/images/icon18.png" mode="aspectFill" class="u-icon"
						v-if="item.urgencyLevel == 1 || item.urgencyLevel == 2"></image>
					<image src="../../../static/images/icon19.png" mode="aspectFill" class="u-icon" v-else></image>
					<text>{{item.urgencyLevelName}}</text>
				</view>
				<view class="orderNo text-ellipsis" v-if="tabType.startsWith('PAGE_REP')">维修单号：{{item.workOrderCode}}
				</view>
				<view class="orderNo text-ellipsis" v-if="tabType.startsWith('PAGE_UPHOLD')">维保单号：{{item.workOrderCode}}
				</view>
				<view class="orderNo text-ellipsis" v-if="tabType.startsWith('PAGE_INS')">巡检单号：{{item.code}}</view>
				<view class="order-con">
					<view class="con" v-if="tabType.startsWith('PAGE_REP') || tabType.startsWith('PAGE_UPHOLD')">
						设备编号：{{item.workOrderCode}}</view>
					<view class="con" v-if="tabType.startsWith('PAGE_UPHOLD')">设备名称：{{item.emName}}</view>
					<view class="con" v-if="tabType.startsWith('PAGE_REP')">设备区域：{{item.treeAreaName}}</view>
					<view class="con" v-if="tabType.startsWith('PAGE_UPHOLD')">设备子系统：{{item.treeName}}</view>
					<view class="con" v-if="tabType.startsWith('PAGE_INS')">巡检区域：{{item.treeAreaName}}</view>
					<view class="con" v-if="tabType.startsWith('PAGE_INS')">巡检子系统：{{item.treeName}}</view>
					<block v-if="tabType.startsWith('PAGE_REP')">
						<view class="con">故障类别：{{item.repFaultTypeName}}</view>
						<view class="con">故障描述：{{item.repDesc}}</view>
					</block>
					<view class="con" v-if="tabType.startsWith('PAGE_UPHOLD')">维保日期：{{item.createTime}}</view>
					<view class="con" v-if="tabType.startsWith('PAGE_INS')">巡检时间：{{item.startDay}} {{item.startTime}}
					</view>
					<view class="con" v-if="tabType.startsWith('PAGE_INS')">
						业务类型：{{item.businessType == 1 ? '日巡检' : item.businessType == 2 ? '周巡检' : item.businessType == 3 ? '月巡检' : '例行巡检'}}
					</view>
				</view>
				<view class="bottom">
					<view class="left">{{item.employeeName}} <text
							v-if="tabType.startsWith('PAGE_REP')">{{item.createTime}}</text></view>
					<view class="right">
						<image src="../../../static/images/label.png" class="bg" mode="widthFix"></image>
						<text
							v-if="tabType.startsWith('PAGE_REP')">{{item.repState == 1 ? '失效' : item.repState == 2 ? '待审核' : item.repState == 3 ? '待领取' : item.repState == 4 ? '拒单' : item.repState == 5 ? '转交' : item.repState == 6 ? '已分配' : item.repState == 7 ? '维修中' : item.repState == 8 ? '暂停' : item.repState == 9 ? '待指派' : item.repState == 10 ? '待验收' : item.repState == 11 ? '验收通过' : ''}}</text>
						<text
							v-if="tabType.startsWith('PAGE_UPHOLD')">{{item.upkeepState == 1 ? '失效' : item.upkeepState == 2 ? '待审核' : item.upkeepState == 3 ? '待领取' : item.upkeepState == 4 ? '拒单' : item.upkeepState == 5 ? '转交' : item.upkeepState == 6 ? '已分配' : item.upkeepState == 7 ? '维保中' : item.upkeepState == 8 ? '暂停' : item.upkeepState == 9 ? '待指派' : item.upkeepState == 10 ? '待验收' : item.upkeepState == 11 ? '验收通过' : ''}}</text>
						<text
							v-if="tabType.startsWith('PAGE_INS')">{{item.state == '-1' ? '失效' : item.state == 1 ? '待审核' : item.state == 2 ? '待巡检' : item.state == 3 ? '巡检中' : item.state == 4 ? '待验收' : item.state == 5 ? '已完成' : item.state == 6 ? '暂停' : item.state == 7 ? '待领取' : ''}}</text>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="status" @LoadMore="clickLoadMore"></uni-load-more>

		<!-- 空数据显示 -->
		<fu-empty-ui emptyImage="collection" v-if="list.length == 0 && isInit"></fu-empty-ui>

		<!-- 筛选弹窗 -->
		<fu-popup mode="bottom" v-model="isShow">
			<view class="popup-box">
				<view class="title">选择筛选条件</view>
				<view class="content">
					<input placeholder="输入单据编号" placeholder-class="pla-ipt" class="ipt" v-model="workOrderCode" />
					<block v-if="tabType.startsWith('PAGE_REP')">
						<view class="name">紧急程度</view>
						<view class="flex chengdu">
							<view class="item" :class="{'item-active': urgencyLevel == item.dictValue}"
								v-for="(item, index) in typeList" :key="index" @click="selType(item)">{{item.dictName}}
							</view>
						</view>
					</block>
					<!-- <block v-if="tabType.startsWith('PAGE_INS')">
						<view class="name">单据类型</view>
						<view class="flex chengdu">
							<view class="item" :class="{'item-active': urgencyLevel == item.dictValue}" v-for="(item, index) in typeList" :key="index" @click="selType(item)">{{item.dictName}}</view>
						</view>
					</block> -->
					<view class="name">时间</view>
					<view class="data-wrap flex justify-start align-center">
						<view class="data-start data-box flex justify-between align-center" @click="isCalShow('start')">
							<view class="data-time">
								{{start_time ? start_time : '起始时间'}}
							</view>
							<view class="data-img">
								<image src="../../../static/images/icon20.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="data-to">
							-
						</view>
						<view class="data-end data-box flex justify-between align-center" @click="isCalShow('end')">
							<view class="data-time">
								{{end_time ? end_time : '结束时间'}}
							</view>
							<view class="data-img">
								<image src="../../../static/images/icon20.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="pop-bottom">
					<view class="left" @click="toReset">重置</view>
					<view class="btn" @click="finish">完成</view>
				</view>
			</view>
		</fu-popup>

		<!-- 日历弹窗 -->
		<fu-popup v-model="calShow" mode="center" border-radius="16" :mask-close-able="true">
			<u-calendar :insert="true" @change="change"></u-calendar>
		</fu-popup>
	</view>
</template>

<script>
	import fuNavbar from '@/components/fu-navbar/fu-navbar.vue';
	import fuTab from '@/components/fu-tab/fu-tab.vue';
	import fuPopup from '@/components/fu-popup/fu-popup.vue';
	import uCalendar from '@/components/u-calendar/uni-calendar.vue';
	import fuEmptyUi from '@/components/fu-empty-ui/fu-empty-ui.vue';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			fuNavbar,
			fuTab,
			fuPopup,
			uCalendar,
			fuEmptyUi,
			uniLoadMore
		},
		data() {
			return {
				title: '',
				tabs: [],
				list: [],
				current: 0,
				isShow: false,
				calShow: false,
				start_time: '',
				end_time: '',
				calType: '',
				isInit: false,
				page: 1,
				workOrderCode: '',
				typeList: [],
				urgencyLevel: '', //紧急程度
				status: 'more',
				state: '',
				tabType: 'PAGE_REP_PENDING_ANNOUNCE'
			}
		},
		computed: {
			tabDynamics() {
				return this.$store.getters.tabDynamics;
			}
		},
		onLoad(option) {
			// let obj = JSON.parse(option.form)
			const list = this.tabDynamics
			this.title = option.title
			console.log(list)
			// this.tabs = obj.children
			this.state = option.state
			this.getType();
			this.current = (option.state === '3' || option.state === '6') ? 2 : 0
			if (this.current === 2) {
				this.tabChange('PAGE_INS_PENDING_ANNOUNCE', 2);
			} else {
				this.getList();
			}
			// this.getList();
		},
		onShow() {
			this.getData();
		},
		onPullDownRefresh() {
			this.getData();
		},
		onReachBottom() {
			if (this.status == 'more') {
				if (this.tabType.startsWith('PAGE_REP')) {
					this.getList();
				} else if (this.tabType.startsWith('PAGE_UPHOLD')) {
					this.getUpkeepList();
				}
			}
		},
		methods: {
			onReachBottom() {
				this.page++
				if (this.tabType.startsWith('PAGE_REP')) {
					this.status = 'more';
					this.getList();
				} else if (this.tabType.startsWith('PAGE_UPHOLD')) {
					this.status = 'more';
					this.getUpkeepList();
				} else if (this.tabType.startsWith('PAGE_INS')) {
					this.status = 'more';
					this.getInsList();
				}
			},
			tabChange(e, i) {
				this.current = i
				this.tabType = e
				this.getData();
			},
			getData() {
				if (this.tabType.startsWith('PAGE_REP')) {
					this.status = 'more';
					this.page = 1;
					this.getList();
				} else if (this.tabType.startsWith('PAGE_UPHOLD')) {
					this.status = 'more';
					this.page = 1;
					this.getUpkeepList();
				} else if (this.tabType.startsWith('PAGE_INS')) {
					this.status = 'more';
					this.page = 1;
					this.getInsList();
				}
			},
			isCalShow(e) {
				this.calType = e
				this.calShow = true
			},
			change(e) {
				if (this.calType == 'start') {
					this.start_time = e.fulldate
				} else {
					this.end_time = e.fulldate
				}
				this.calShow = false
			},
			toReset() {
				this.workOrderCode = ''
				this.urgencyLevel = ''
				this.start_time = ''
				this.end_time = ''
			},
			finish() {
				if (this.tabType.startsWith('PAGE_REP')) {
					this.status = 'more';
					this.page = 1;
					console.log("维修")
					this.getList();
				} else if (this.tabType.startsWith('PAGE_UPHOLD')) {
					this.status = 'more';
					this.page = 1;
					console.log("维保")
					this.getUpkeepList();
				} else if (this.tabType.startsWith('PAGE_INS')) {
					this.status = 'more';
					this.page = 1;
					console.log("巡检")
					this.getInsList();
				}
				// this.status = 'more';
				// this.page = 1;
				// this.getList();
				this.isShow = false
			},
			// 查询紧急程度
			getType() {
				this.$api.post(global.apiUrls.selectType, {
					dictTypeCode: 'TYPE_URGENCY_LEVEL'
				}).then(res => {
					if (res.data.code == 9100) {
						this.typeList = res.data.info
					}
				})
			},
			// 选择类型
			selType(e) {
				this.urgencyLevel = e.dictValue
			},
			getList() {
				if (this.status != 'more') return;
				this.status = 'loading';
				this.$api.post(global.apiUrls.getPendingList, {
					pageNum: this.page,
					pageSize: 15,
					repState: this.state,
					urgencyLevel: this.urgencyLevel,
					workOrderCode: this.workOrderCode,
					startTime: this.start_time,
					endTime: this.end_time
				}).then(res => {
					if (res.data.code == 9100) {
						let total = res.data.info.total
						let data = res.data.info.rows
						if (this.page == 1) this.list = [];
						this.list = this.list.concat(data)
						if (this.list.length < total) {
							this.status = 'more';
							// this.page++;
						} else {
							this.status = 'noMore';
						}
					}
					this.isInit = true;
					uni.stopPullDownRefresh();
				}).catch(() => {
					uni.stopPullDownRefresh();
				})
			},
			// 查询维保列表
			getUpkeepList() {
				if (this.status != 'more') return;
				this.status = 'loading';
				this.$api.post(global.apiUrls.getPendingUpkeepAll, {
					pageNum: this.page,
					pageSize: 15,
					upkeepState: this
						.state, //upkeepState= 2 审核列表 upkeepState= 3 待领取列表 upkeepState= 4 待派单列表 upkeepState= 9 验收指派列表 upkeepState= 10 待验收列表 upkeepState= 6 我处理的列表 upkeepState= 11 历史记录列表
					workOrderCode: this.workOrderCode,
					startTime: this.start_time,
					endTime: this.end_time
				}).then(res => {
					if (res.data.code == 9100) {
						console.log(res.data)
						let total = res.data.info.total
						let data = res.data.info.rows
						if (this.page == 1) this.list = [];
						this.list = this.list.concat(data)
						if (this.list.length < total) {
							this.status = 'more';
							// this.page++;
						} else {
							this.status = 'noMore';
						}
					}
					this.isInit = true;
					uni.stopPullDownRefresh();
				}).catch(() => {
					uni.stopPullDownRefresh();
				})
			},
			getInsList() {
				if (this.status != 'more') return;
				this.status = 'loading';
				let state = this.state == 3 ? 7 : this.state == 10 ? 4 : this.state == 6 ? '2,3,6' : ''
				this.$api.post(global.apiUrls.selectPatrolApp, {
					pageNum: this.page,
					pageSize: 15,
					state: state, //-1失效，1待审核，2待巡检，3巡检中，4待验收，5已完成，6暂停
					orderCode: this.workOrderCode,
					strTime: this.start_time,
					endTime: this.end_time
				}).then(res => {
					if (res.data.code == 9100) {
						let total = res.data.info.total
						let data = res.data.info.rows
						if (this.page == 1) this.list = [];
						this.list = this.list.concat(data)
						if (this.list.length < total) {
							this.status = 'more';
							// this.page++;
						} else {
							this.status = 'noMore';
						}
						// this.page++;
					}
					this.isInit = true;
					uni.stopPullDownRefresh();
				}).catch(() => {
					uni.stopPullDownRefresh();
				})
			},
			toDetail(e) {
				console.log(this.tabType)
				if (this.tabType.startsWith('PAGE_REP')) {
					if (e.repState == 7 || e.repState == 8) {
						uni.navigateTo({
							url: `/pages/service/order-detail/my-order?repState=${e.repState}&repId=${e.repId}`
						})
					} else {
						uni.navigateTo({
							url: `/pages/service/order-detail/index?repState=${e.repState}&repId=${e.repId}&state=${this.state}`
						})
					}
				} else if (this.tabType.startsWith('PAGE_UPHOLD')) {
					uni.navigateTo({
						url: `/pages/maintenance/main-detail/index?upkeepState=${e.upkeepState}&state=${this.state}&upkeepId=${e.upkeepId}`
					})
				} else if (this.tabType.startsWith('PAGE_INS')) {
					console.log("404")
					uni.navigateTo({
						url: `/pages/inspection/inspec-detail/index?state=${e.state}&id=${e.id}`
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #f3f5f8;
	}
	
	.fixTop{
		position: fixed;
		width: 100%;
		top: 150rpx;
		z-index: 99;
		background-color: #fff;
	}

	.tab-wrap {
		
		background-color: #fff;
		height: 88rpx;
		display: flex;
		// position: sticky;
		z-index: 99;

		.tab {
			flex: 1;
			height: 88rpx;
			line-height: 88rpx;
			position: relative;
			text-align: center;
			color: #5f5f5f;
		}

		.tab-active {
			color: #333;

			&::after {
				content: '';
				width: 88rpx;
				height: 6rpx;
				background-color: #555;
				border-radius: 5rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				margin: 0 auto;
				z-index: 9;
			}
		}
	}

	.shaixuan {
		padding: 24rpx;
		display: flex;
		justify-content: right;

		image {
			width: 56rpx;
			height: 56rpx;
		}
	}

	.list {
		padding: 0 24rpx;
		overflow: hidden;

		.item {
			background-color: #fff;
			padding: 0 32rpx;
			border-radius: 20rpx;
			margin-bottom: 24rpx;
			position: relative;

			.urgent {
				position: absolute;
				top: 12rpx;
				right: 12rpx;
				display: flex;
				align-items: center;

				.u-icon {
					width: 42rpx;
					height: 42rpx;
					margin-right: 8rpx;
				}

				text {
					color: #f85d76;
					font-size: 26rpx;
				}
			}

			.orderNo {
				font-weight: bold;
				font-size: 28rpx;
				padding: 24rpx 70rpx 24rpx 0;
				border-bottom: 1rpx solid #f2f2f2;
			}

			.order-con {
				padding: 16rpx 0;
				border-bottom: 1rpx solid #f2f2f2;

				.con {
					font-size: 28rpx;
					line-height: 46rpx;
				}
			}

			.bottom {
				padding: 10rpx 0;
				display: flex;
				align-items: center;

				.left {
					font-size: 28rpx;
					color: #8d8d8d;
					flex: 1;
				}

				.right {
					flex-shrink: 0;
					position: relative;
					height: 52rpx;
					padding-left: 16rpx;
					width: 146rpx;
					box-sizing: border-box;
					text-align: center;

					.bg {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						bottom: 0;
						right: 0;
						margin: auto 0;
						z-index: 0;
					}

					text {
						position: relative;
						font-size: 26rpx;
						color: #fff;
						z-index: 2 !important;
						line-height: 52rpx;
					}
				}
			}
		}
	}

	.popup-box {
		background-color: #fff;

		.title {
			text-align: center;
			padding: 24rpx 0;
		}

		.content {
			padding: 0 56rpx;
			border-bottom: 1rpx solid #f2f2f2;
		}

		.ipt {
			border: 1rpx solid #f2f2f2;
			padding: 24rpx;
			font-size: 28rpx;
		}

		.pla-ipt {
			color: #c1c1c1;
		}

		.name {
			font-size: 28rpx;
			padding: 24rpx 0;
		}

		.chengdu {
			flex-wrap: wrap;

			.item {
				width: calc(25% - 24rpx);
				margin-right: 32rpx;
				margin-bottom: 12rpx;
				border-radius: 5rpx;
				height: 76rpx;
				background-color: #f2f2f2;
				line-height: 76rpx;
				text-align: center;
				font-size: 28rpx;

				&:nth-of-type(4n) {
					margin-right: 0;
				}
			}

			.item-active {
				background-color: rgb(15, 104, 240);
				color: #fff;
			}
		}

		.data-wrap {
			padding-bottom: 24rpx;
			box-sizing: border-box;
			position: relative;
			z-index: 11;

			.data-to {
				padding: 0 24rpx;
			}

			.data-time {
				font-size: 28rpx;
				color: #7a7a7a;
			}

			.data-box {
				width: 245rpx;
				height: 78rpx;
				border: 1px solid #f2f2f2;
				border-radius: 8rpx;
				padding: 0 20rpx;
				// box-sizing: border-box;

				.data-img {
					width: 30rpx;
					height: 30rpx;
					margin-top: -4rpx;

					image {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}
	}

	.pop-bottom {
		display: flex;
		align-items: center;
		padding: 12rpx 24rpx;
		font-size: 28rpx;
		justify-content: space-between;

		.left {
			width: 108rpx;
			text-align: center;
		}

		.btn {
			width: 160rpx;
			height: 56rpx;
			border: 1rpx solid #bfbfbf;
			text-align: center;
			line-height: 56rpx;
			border-radius: 56rpx;
		}
	}
</style>